<template>
    <div>Name:{{name}}</div>
    <input type="text" v-model="name" />
  <div>
    <input type="radio" name="sex" :checked="sex === Sex.male" @click="() => sex = Sex.male" />Male
    <input type="radio" name="sex" :checked="sex === Sex.female" @click="() => sex = Sex.female" />Female
  </div>
  <p>
    <button @click="handleSubmit">Submit</button>
    {{submit}}
  </p>
  <button @click="hello">to hello</button>
</template>
<script setup lang="ts">
  import { onMounted,ref } from 'vue';
  import { useRouter } from 'vue-router'
  const Sex={male:'男',female:'女'}
  const fetchUserInfo=(n:String)=>{
    console.log(n)
  }
  const name=ref("")
  const sex=ref(Sex.male)
  const submit=ref("")
  onMounted(()=>{
    fetchUserInfo('id-xxx')
  })

  const handleSubmit=()=>{
    console.log('submit')
    submit.value=`name:${name.value || 'null'},sex:${sex.value}`
    console.log(name.value || 'null')
    console.log(sex.value)
  }
  const router = useRouter()
  const hello=()=>{
    console.log('hello')
    router.push({path:'/hello'})
  }

</script>